<!--采购验收入库-->
<template>
  <div class="app-container warehouse">
    <el-form :model="selectForm" ref="selectForm" :inline="true">
      <!-- <el-form-item label="设备名称">
        <el-input v-model="selectForm.deviceName" placeholder="请输入设备名称" clearable size="small" />
      </el-form-item> -->
      <el-form-item label="计划单号">
        <el-input v-model="selectForm.planCode" placeholder="请输入计划单号" clearable size="small" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="selectForm.pageNum=1;getList()">搜索</el-button>
        <el-button type="warning" icon="el-icon-download" size="mini" @click="exportList">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="list.rows" border>
      <el-table-column align="center" type="index" label="序号" width="55"/>
        <el-table-column align="center" label="采购计划单号" property="planCode" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="details(scope.row)">
              {{scope.row.planCode}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="采购计划标题" property="title"/>
        <el-table-column align="center" label="采购计划类型" property="purchasePlanType">
          <template slot-scope="scope" style="text-align: center">
            <template v-if="scope.row.purchasePlanType==1">临时</template>
            <template v-if="scope.row.purchasePlanType==2">月度</template>
            <template v-if="scope.row.purchasePlanType==3">年度</template>
          </template>
        </el-table-column>
        <el-table-column align="center" label="申请人" property="applyUserName"/>
        <el-table-column align="center" label="申请日期" property="applyTime"/>
<!--        <el-table-column label="验收日期" align="center" width="180">-->
<!--          <template slot-scope="scope">-->
<!--            {{ parseTime(scope.row.acceptDate) }}-->
<!--          </template>-->
<!--        </el-table-column>-->
<!--        <el-table-column label="申请状态" property="verifyStatus" :show-overflow-tooltip="true"/>-->
        <el-table-column label="审核状态" align="center" width="150">
          <template slot-scope="scope">
            <span v-show="scope.row.verifyStatus==0">审核中</span>
            <span v-show="scope.row.verifyStatus==1">审核结束</span>
          </template>
        </el-table-column>
    </el-table>
    <pagination
      :total="list.total?list.total:0"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />
    <el-dialog :title="popForm.acceptance==1?'修改':'审核'" :visible.sync="isDialog" :close-on-click-modal="false" width="1000px">

      <h4>基本信息</h4>
      <table border="1" rules="all" class="table">
        <tr>
          <td>设备名称</td>
          <td class="title">{{popForm.deviceName}}</td>
          <td>规格型号</td>
          <td class="title">{{popForm.deviceModel}}</td>
          <td>数量(台)</td>
          <td class="title">
            <el-input v-model="popForm.realProcureNum" type="number"></el-input>
          </td>
        </tr>
        <tr>
          <td>生产制造单位</td>
          <td>
            <el-input v-model="popForm.productionUnit"></el-input>
          </td>
          <td>合同编号</td>
          <td>
            <el-input v-model="popForm.contractNumber"></el-input>
          </td>
          <td>验收时间</td>
          <td>
            <el-date-picker
              value-format="yyyy-MM-dd HH:mm:ss"
              class="datatime"
              v-model="popForm.receptionTime"
              type="datetime"
              placeholder="选择日期时间"
            ></el-date-picker>
          </td>
        </tr>
        <tr>
          <td>生产厂家</td>
          <td colspan="2">
            <el-select v-model="popForm.supplierId" placeholder="请选择">
              <el-option
                v-for="item in optionsgongys"
                :key="item.id"
                :label="item.supplierName"
                :value="String(item.id)"
              ></el-option>
            </el-select>
          </td>
          <td>生产厂家信息</td>
          <td colspan="2"></td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="5">
            <el-input :rows="2" type="textarea" v-model="popForm.remark"></el-input>
          </td>
        </tr>
        <tr>
          <td>验收结果</td>
          <td colspan="5">
            <el-input type="textarea" v-model="popForm.acceptanceResult"></el-input>
          </td>
        </tr>
      </table>
      <h4>
        部门信息
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="addBumen"
          style="margin-left:20px"
        >添加</el-button>
      </h4>

      <el-table border :data="popForm.detailList">
        <el-table-column align="center" type="index" label="序号" width="55" />

        <el-table-column align="center" label="验收部门" property="deptName">
          <template slot-scope="scope">
            <el-input v-model="scope.row.deptName"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="验收人员" property="checkingPersonnel">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.checkingPersonnel"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="负责人" property="leader">
          <template slot-scope="scope">
            <el-input type="number" v-model="scope.row.leader"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              @click="setDel(scope.$index)"
              icon="el-icon-delete"
              type="danger"
              size="mini"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 验收单据 -->
    <el-dialog title="操作" :visible.sync="isDanDialog" :close-on-click-modal="false" width="1000px">
      <form id="form1">
        <table border="1" rules="all" class="table" style="width:700px">
          <tr>
            <td style="width:8%;text-align:center;">设备名称</td>
            <td style="width:14%;padding-left: 20px;text-align:left;">1212</td>
            <td style="width:8%;text-align:center;">规格型号</td>
            <td style="width:10%;padding-left: 20px;text-align:left;" class="title">11</td>
            <td style="width:8%;text-align:center;">数量(台)</td>
            <td style="width:10%;padding-left: 20px;text-align:left;" class="title">555</td>
          </tr>
          <tr>
            <td style="text-align:center;">生产制造单位</td>
            <td style="padding-left:20px;text-align:left;"></td>
            <td style="text-align:center;">合同编号</td>
            <td style="padding-left:20px;text-align:left;"></td>
            <td style="text-align:center;">验收时间</td>
            <td style="padding-left:20px;text-align:left;"></td>
          </tr>

          <tr rowspan="4">
            <td colspan="6" style="text-align:left;padding:0 15px;">
              <h3>验收结果（手填）：</h3>
              <p style="text-indent:2em">一、根据**设备采购项目技术协议、合同”相关条款要求，由
                通风部、机电管理部组织对新到货**设备入井使用进行联合验收。
                目前，设备使用正常，满足要求，验收合格。</p>
            </td>
          </tr>
          <tr>
            <td>备注</td>
            <td colspan="5"></td>
          </tr>
          <tr><td colspan="6">验收单位(人员)签字</td></tr>
          <tr :rowspan="4">
            <td colspan="6">
            <table border="1" rules="all" class="table">
              <tr>
                <td colspan="2" :rowspan="3" style="width:15%"></td>
                <td colspan="2" style="width:15%">验收部门</td>
                <td style="width:15%">验收人员</td>
                <td style="width:15%">负责人</td>
              </tr>
              <tr>
                <td colspan="2">验收部门</td>
                <td>验收人员</td>
                <td>负责人</td>
              </tr>
              <tr>
                <td colspan="2">验收部门</td>
                <td>验收人员</td>
                <td>负责人</td>
              </tr>
              <tr>
                <td colspan="2">**煤机装备有限公司</td>
                <td colspan="4"></td>
              </tr>
            </table>
            </td>
          </tr>

        </table>
      </form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="print">打 印</el-button>
      </div>
    </el-dialog>
    <procure-plan-des v-if="isprocureDes" @subSetChane="subSetChane" :pid="pid"></procure-plan-des>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import request from "@/utils/request";
import {
  procureDevice,
  procureAccAdd,
  procureAccEdit,
  procurePlan
} from "@/api/purchase/index";
import procurePlanDes from './cgrk'

export default {
  components:{
    procurePlanDes
  },
  data() {
    return {
      isDanDialog:false,
      isDialog: false,
      info: null,

      loading: false,
      list: [],
      selectForm: {
        pageNum: 1,
        pageSize: 10,
      },
      optionsgongys: [],
      popForm: {},

      isprocureDes:false,
      pid:null
    };
  },
  watch: {
    isDialog() {
      if (!this.isDialog) {
        this.popForm = {};
      }
    },
  },
  created() {
    this.getGys();
    this.getList();
    console.log(this.$store.state.user);
  },
  methods: {
    //获取生产厂家数据
    getGys() {
      request({
        url: "/device/DeviceSupplier/list",
        method: "get",
      }).then((response) => {
        this.optionsgongys = response.rows;
      });
    },
    /** 查询设备类型表列表 */
    async getList() {
      this.loading = true;
      let res = await procurePlan(this.selectForm);
      this.list = res;
      this.loading = false;
    },
    details(row) {
      // this.$router.push({ path: '/purchaseGL/applicationXQ', query: { data: row.planId } })
      this.pid=row.id
      this.isprocureDes=true
    },
    subSetChane(info){
      this.isprocureDes=false
      this.pid=null
    },
    pop(row) {
      if(row.acceptance==1){
        request({
          url: `/device-procurement-acceptance-api/${row.procureDeviceId}`,
          method: "get",
        }).then((response) => {
          this.popForm = response.data;
          this.popForm.acceptance = row.acceptance;
        });
      }else{
        this.popForm.deviceName = row.deviceName;
        this.popForm.deviceModel = row.deviceModel;
        this.popForm.planId = row.planId;
        this.popForm.procureDeviceId = row.procureDeviceId;
        this.$set(this.popForm, 'realProcureNum', row.anticipatedProcureNum)
        // this.popForm.realProcureNum = row.anticipatedProcureNum;
        this.popForm.detailList = [];
        this.popForm.remark = row.remark;
        this.popForm.acceptance = row.acceptance;
      }


      this.isDialog = true;
    },
    close() {
      this.isDialog = false;
    },
    addBumen() {
      //新加部门
      this.popForm.detailList.push({
        checkingPersonnel: null,
        deptName: null,
        leader: null,
      });
    },
    setDel(index) {
      //删除
      this.popForm.detailList.splice(index, 1);
    },
    async submit() {
      //提交
      if (!this.popForm.detailList.length > 0) {
        this.$message.warning("请添加部门信息");
        return false;
      }
      for (let i = 0; i < this.popForm.detailList.length; i++) {
        if (!this.popForm.detailList[i].deptName) {
          this.$message.warning("请选择部门");
          return false;
        }
      }
      let res =
        this.popForm.acceptance == 1
          ? await procureAccEdit(this.popForm)
          : await procureAccAdd(this.popForm);
      if (res.code == 200) {
        this.$message.success(res.msg);
        this.isDialog = false;
        this.popForm = {};
        this.getList()
      }
    },
    exportList() {
      //导出
    },
    print:function(row){
      console.log('打印',row)
      var newWin = window.open(""); //新打开一个空窗口
      var imageToPrint = document.getElementById("form1"); //获取打印内容
      newWin.document.write(imageToPrint.outerHTML); //将图片添加进新的窗口
      newWin.document.close(); //在IE浏览器中使用必须添加这一句
      newWin.focus(); //在IE浏览器中使用必须添加这一句
      setTimeout(function () {
        newWin.print(); //打印
        newWin.close(); //关闭窗口
      }, 100);

    },
  },
};
</script>
<style lang="scss">
.warehouse {
  h4 {
    color: #05a380;
  }
  .table {
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;

    tr {
      .el-input--medium .el-input__inner,
      .el-textarea .el-textarea__inner {
        border: none;
      }

      td:nth-child(2n-1) {
        width: 180px;
        text-align: center;
      }

      td:nth-child(2n) {
        width: 320px;
      }

      .title {
        padding-left: 20px;
        text-align: left;
      }

      td {
        line-height: 35px;

        .el-select,
        .datatime {
          width: 100%;
        }
      }
    }
  }
}
</style>
